<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据管理</title>
    <link rel="stylesheet" href="css/dashboard.css">
</head>
<body>
    <div class="sidebar">
        <h2>野生鸟类数据管理</h2>
        <ul>
            <li><a href="user-management.html">用户管理</a></li>
            <li><a href="data-management.html">数据管理</a></li>
            <li><a href="baiduImage.html">图片检测</a></li>
        </ul>
        <div class="user-info">
            <p>Welcome<span id="username"></span>!</p>
            <button id="logout-btn">退出</button>
        </div>
    </div>

    <div class="main-content">
        <h1>数据管理</h1>
        <div class="toolbar">
            <button id="add-data-btn">添加数据</button>
            <input type="text" id="search-input" placeholder="搜索...">
        </div>

        <!-- HTML 中添加一个隐藏的模态框，用于查看放大后的图片 -->
        <div id="myModal" class="modal">
            <span class="close" onclick="closeZoomModal()">&times;</span>
            <img id="modalImg" class="modal-content">
        </div>

        <!-- 用于添加数据的隐藏模态框 -->
        <div id="add-data-modal" class="modal">
            <div class="modal-content">
                <span class="close" onclick="closeAddModal()">&times;</span>
                <h2>添加数据</h2>
                <form id="add-data-form">
                    <!-- 表单字段 -->
                    <label for="category">目标物类别:</label>
                    <input type="text" id="category" name="category" required><br>
                    <label for="status">目标物状态:</label>
                    <input type="text" id="status" name="status" required><br>                   
                    <label for="longitude">经度信息:</label>
                    <input type="text" id="longitude" name="longitude" required><br>
                    <label for="latitude">纬度信息:</label>
                    <input type="text" id="latitude" name="latitude" required><br>
                    <label for="area">地区信息:</label>
                    <input type="text" id="area" name="area" required><br>
                    <label for="channelLevel">航道等级:</label>
                    <select id="channelLevel" name="channelLevel" required>
                        <option value="1">一级</option>
                        <option value="2">二级</option>
                        <option value="3">三级</option>
                        <option value="4">四级</option>
                        <option value="5">五级</option>
                        <option value="6">六级</option>
                    </select><br>
                    <label for="channelName">航道名称:</label>
                    <input type="text" id="channelName" name="channelName" required><br>
                    <label for="device">检测设备:</label>
                    <input type="text" id="device" name="device" required>
                    <!-- 隐藏录入时间的输入行 -->
                    <input type="hidden" id="inputTime" name="inputTime" readonly required><br>
                    <label for="operationTime">作业时间:</label>
                    <input type="date" id="operationTime" name="operationTime" required><br>
                    <label for="image">检测数据:</label>
                    <input type="file" id="image" name="image" accept="image/*" required><br>
        
                    <button type="submit">提交</button>
                </form>
            </div>
        </div>

        <!-- 用于编辑数据的隐藏模态框 -->
        <div id="edit-data-modal" class="modal">
            <div class="modal-content">
                <span class="close" onclick="closeEditModal()">&times;</span>
                <h2>编辑数据</h2>
                <form id="edit-data-form">
                    <!-- 表单字段 -->
                    <label for="category">目标物类别:</label>
                    <input type="text" id="edit-category" name="category" required><br>
                    <label for="status">目标物状态:</label>
                    <input type="text" id="edit-status" name="status" required><br>
                    <label for="longitude">经度信息:</label>
                    <input type="text" id="edit-longitude" name="longitude" required><br>
                    <label for="latitude">纬度信息:</label>
                    <input type="text" id="edit-latitude" name="latitude" required><br>
                    <label for="area">地区信息:</label>
                    <input type="text" id="edit-area" name="area" required><br>
                    <label for="channelLevel">航道等级:</label>
                    <select id="edit-channelLevel" name="channelLevel" required>
                        <option value="1">一级</option>
                        <option value="2">二级</option>
                        <option value="3">三级</option>
                        <option value="4">四级</option>
                        <option value="5">五级</option>
                        <option value="6">六级</option>
                    </select><br>
                    <label for="channelName">航道名称:</label>
                    <input type="text" id="edit-channelName" name="channelName" required><br>
                    <label for="device">检测设备:</label>
                    <input type="text" id="edit-device" name="device" required>
                    <!-- 隐藏录入时间的输入行 -->
                    <input type="hidden" id="inputTime" name="inputTime" readonly required><br>
                    <label for="operationTime">作业时间:</label>
                    <input type="date" id="edit-operationTime" name="operationTime" required><br>
                    <label for="image">检测数据:</label>
                    <input type="file" id="edit-image" name="image" accept="image/*" required><br>
                    
                    <button type="submit">提交</button>
                </form>
            </div>
        </div>

        <!-- 查看详情模态框 -->
        <div class="modal" id="detailsModal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <!-- 模态框头部 -->
                    <div class="modal-header">
                        <h4 class="modal-title">数据详情</h4>
                        <button type="button" id="closeButton" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <!-- 模态框主体 -->
                    <div class="modal-body" id="detailsModalBody">
                        <!-- 这里是数据详情 -->
                    </div>
                    <!-- 模态框底部 -->
                    <div class="modal-footer">
                    </div>
                </div>
            </div>
        </div>


        <table id="data-table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>名称</th>
                    <th>状态</th>
                    <th>图片</th>
                    <th>使用设备</th>
                    <th>录入时间</th>
                    <th>操作</th>
                    <!-- 其他属性... -->
                </tr>
            </thead>
            <tbody id="data-body">
                <!-- 数据展示容器 -->
            </tbody>
        </table>
        <div id="pagination">
            <!-- 分页控件 -->
        </div>
    </div>
    <script src="js/data-management.js"></script>
</body>
</html>
